{% extends 'base.html' %}

{% block content %}
<style>
  .img1 {
    width: 180px;
    padding: 10px 0;
  }

  .rich-content {
    outline: 1px solid #e9ecef;
    padding: 10px;
    border-radius: 5px;
  }

  .rich-content * {
    margin: 0;
    padding: 0;
    padding-bottom: 5px;
  }

  .rich-content img {
    width: 200px !important;
  }

  .rich-content td {
    border-color: snow !important;
  }

  .img_list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: stretch;
    gap: 5px;
  }

  .img_list img {
    width: 100%;
    height: 180px;
    border-radius: 4px;
    object-fit: cover;
  }

  .commentList {
    margin-top: 5px;
  }

  .comment_item {
    padding: 5px;
    width: 60%;
    outline: 1px solid #9e9e9e;
    border-radius: 4px;
    margin-bottom: 1px;
  }



  .comment_item * {
    /* outline: 1px solid red; */
    margin: 0 !important;
  }

  .comment_item_info {
    overflow: hidden;
  }

  .comment_item_info img {
    width: 50px;
    height: 50px;
    border-radius: 25px;
    float: left;
  }

  .comment_item_info2 {
    float: left;
    height: 50px;
    width: calc(100% - 50px);
  }

  .comment_item_info2 p {
    color: #9e9e9e;
    font-size: 14px;
    padding-left: 5px;
    height: 25px;
    line-height: 25px;
  }

  .sp1 {
    font-size: 16px;
    color: #00cad8;
  }

  .sp2 {
    float: right;
    color: #9e9e9e;
    padding-right: 5px;
  }

  .comment_detail {
    padding: 5px;
  }

  .comment_img {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
  }

  .comment_img img {
    width: 100%;
    border-radius: 4px;
    object-fit: cover;
    height: 150px;
  }

  @media (max-width: 1199px) {
    .comment_item {
      width: 75%;
    }

    .comment_img img {
      height: 100px;
    }

    .img_list img {
      height: 80px;
    }
  }
</style>

<div class="pagetitle">
  <ul class="breadcrumb">
    <li class="breadcrumb-item">景点数据集</li>
    <li class="breadcrumb-item active">数据详情</li>
  </ul>
</div>
<section class="section dashboard">
  <div class="row">
    <div class="col-lg-12">

      <div class="card">
        <div class="card-body">
          <div class="activity">
            <div class="row mb-3">
              <label for="inputText" class="col-sm-2 col-form-label">景点名称</label>
              <div class="col-sm-10">
                <input type="text" disabled value="{{ travelInfo.province }} {{ travelInfo.city }} {{ travelInfo.title }}" class="form-control">
              </div>
            </div>
            <div class="row mb-3">
              <label for="inputText" class="col-sm-2 col-form-label">详情地址</label>
              <div class="col-sm-10">
                <input type="text" disabled value="{{ travelInfo.address }}" class="form-control">
              </div>
            </div>
            <div class="row mb-3">
              <label for="inputText" class="col-sm-2 col-form-label">封面图片</label>
              <div class="col-sm-10">
                <img class="img1" src="{{ travelInfo.cover }}" alt="">
              </div>
            </div>

            <div class="row mb-3">
              <label for="inputText" class="col-sm-2 col-form-label">景点介绍</label>
              <div class="col-sm-10 ">
                <div class="rich-content">{{ travelInfo.introduce|safe }}</div>
              </div>
            </div>
            <div class="row mb-3">

              <label for="inputText" class="col-sm-2 col-form-label">景点图片</label>
              <div class="col-sm-10">
                <div class="img_list">
                  {% for img in img_list %}
                  <img src="{{ img }}" alt="">
                  {% endfor %}
                </div>
              </div>
            </div>

            <div class="row mb-3">
              <label for="inputText" class="col-sm-2 col-form-label">景点评分</label>
              <div class="col-sm-10">
                <input type="text" disabled value="{{travelInfo.score}} 分" class="form-control">
              </div>
            </div>
            <div class="row mb-3">
              <label for="inputText" class="col-sm-2 col-form-label">门票价格</label>
              <div class="col-sm-10">
                <input type="text" disabled value="{{travelInfo.price}} 元" class="form-control">
              </div>
            </div>
            <div class="row mb-3">
              <label for="inputText" class="col-sm-2 col-form-label">景点等级</label>
              <div class="col-sm-10">
                <input type="text" disabled value="{{travelInfo.level}} 景区" class="form-control">
              </div>
            </div>

            <div class="row mb-3">
              <label for="inputText" class="col-sm-2 col-form-label">感兴趣人数</label>
              <div class="col-sm-10">
                <input type="text" disabled value="{{travelInfo.interestNum}} 人" class="form-control">
              </div>
            </div>

            <div class="row mb-3">
              <label for="inputText" class="col-sm-2 col-form-label">详情地址</label>
              <div class="col-sm-10">
                <a href="{{travelInfo.detailUrl}}" target="_blank" style="line-height: 35px;">点击跳转</a>
              </div>
            </div>

            <div class="row mb-3">
              <label for="inputText" class="col-sm-2 col-form-label">评论数</label>
              <div class="col-sm-10">
                <input type="text" disabled value="{{travelInfo.comment_total}}" class="form-control">
              </div>
            </div>

            <div class="row mb-3">
              <label for="inputText" class="col-sm-2 col-form-label">评论列表</label>
              <div class="col-sm-10">
                <div class="commentList">

                  {% for comment in commentList %}
                  <div class="comment_item">
                    <div class="comment_item_info">
                      <img class="img-fluid" src="{{comment.headImg}}">
                      <div class="comment_item_info2">
                        <p>{{comment.author}}</p>
                        <p>
                          <span class="sp1">{{comment.score}}分</span>
                          <span class="sp2">{{comment.date}} | {{comment.cityName}}</span>
                        </p>
                      </div>
                    </div>

                    <p class="comment_detail">{{ comment.content }}</p>
                    <div class="comment_img">
                      {% for img in comment.imgs %}
                      <img src="{{ img }}" alt="">
                      {% endfor %}
                    </div>
                  </div>
                  {% endfor %}

                </div>
              </div>
            </div>

            <div class="row mb-3">
              <label for="inputText" class="col-sm-2 col-form-label"></label>
              <div class="col-sm-10">
                <a href="/app/tableData?page={{page}}" class="btn btn-primary">返回</a>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>

  </div>
</section>
{% endblock %}

{% block js %}
<script>

</script>
{% endblock %}